﻿<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8"/>
    <!--<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">-->
    <link rel="stylesheet" type="text/css" href="css/nanhang.css">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="IIInsomniaCityPicker/css/cityPicker.css">
    <script type="text/javascript" src="IIInsomniaCityPicker/js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="IIInsomniaCityPicker/js/jquery.cookie.js"></script>

    <script src="js/top.js"></script>
    <script src="js/nanhang.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/datechoose.js"></script>
    <script type="text/javascript" src="IIInsomniaCityPicker/js/cityData.js"></script>
    <script type="text/javascript" src="IIInsomniaCityPicker/js/cityPicker.js"></script>
    <script src="js/citychoose.js"></script>
    <script type="text/javascript">
        function findflight() {
            var deptcity = $("#deptcity").val();
            var arrcity = $("#arrcity").val();
            var flightd = $("#flightdate").val();
            $.ajax({
                url: "/flight/findone",
                type: "post",
                dataType: "json",
                data: {
                    'deptc': deptcity,
                    'arrc': arrcity,
                    'flightd': flightd

                },
                success: function (data) {
                    var flightno = data.flightno;
                    var deptcity = data.deptcity;
                    var arrcity = data.arrcity;
                    var flightdate = mydate(data.flightdate);
                    var cnf = (data.flightcabins[0].cabinname);
                    var cpf = (data.flightcabins[0].cabinprice);
                    var cny = (data.flightcabins[1].cabinname);
                    var cpy = (data.flightcabins[1].cabinprice);
                    var cne = (data.flightcabins[2].cabinname);
                    var cpe = (data.flightcabins[2].cabinprice);
                    var cnr = (data.flightcabins[3].cabinname);
                    var cpr = (data.flightcabins[3].cabinprice);
                    window.location.href = "HBchoose.html?flightNo=" + flightno + "&deptC=" + deptcity + "&arrC=" + arrcity + "&flightD=" + flightdate + "&cnf=" + cnf + "&cpf=" + cpf + "&cny=" + cny + "&cpy=" + cpy + "&cne=" + cne + "&cpe=" + cpe + "&cnr=" + cnr + "&cpr=" + cpr + "";
                },
            });
        }

        function mydate(var1) {
            var date = new Date(var1);
            Y = date.getFullYear() + '-';
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes() + ':';
            s = date.getSeconds();
            return Y + M + D + h + m + s;
        }

    </script>
</head>
<body>
<div class="container">

    <div class="middle"></div><!--不可以去,因为头部是加在middle类的前面-->
    <div class="banner-box">
        <a href="#"></a>
        <div class="banner" id="igs">
            <a class="ig" href="javascript:;"><img src="img/banner1.jpg"/></a>
            <a class="ig" href="javascript:;"><img src="img/banner2.jpg"/></a>
            <a class="ig" href="javascript:;"><img src="img/banner3.jpg"/></a>
            <a class="ig" href="javascript:;"><img src="img/banner4.jpg"/></a>
            <a class="ig" href="javascript:;"><img src="img/banner5.jpg"/></a>
            <a class="ig" href="javascript:;"><img src="img/banner6.jpg"/></a>
        </div>
            <div class="point">
                <ul id="tabs">
                    <li class="tab"><a href="javascript:;"></a></li>
                    <li class="tab"><a href="javascript:;"></a></li>
                    <li class="tab"><a href="javascript:;"></a></li>
                    <li class="tab"><a href="javascript:;"></a></li>
                    <li class="tab"><a href="javascript:;"></a></li>
                    <li class="tab"><a href="javascript:;"></a></li>
                </ul>
        </div>
        <div class="mlss">
            <div class="left">
                <ul>
                    <li class="active"><a href="javascript:;"><span class="iconfont">&#xe644;</span>预&nbsp;订</a></li>
                    <li><a href="javascript:;"><span class="iconfont">&#xe609;</span>服&nbsp;务</a></li>
                    <li><a href="javascript:;"><span class="iconfont">&#xe7c0;</span>旅&nbsp;游</a></li>
                    <li><a href="javascript:;"><span class="iconfont">&#xe6b7;</span>信&nbsp;息</a></li>
                    <li><a href="javascript:;"><span class="iconfont">&#xe611;</span>移动端</a></li>
                    <li><a href="javascript:;"><span class="iconfont">&#xe9bb;</span>团&nbsp;队</a></li>
                </ul>
            </div>
            <div class="right yd">
                <div class="top">
                    <ul>
                        <li class="active"><a href="javascript:;"><span class="iconfont">&#xe601;</span>机票</a></li>
                        <li><a href="javascript:;"><span class="iconfont">&#xec3f;</span>酒店</a></li>
                        <li><a href="javascript:;"><span class="iconfont">&#xe672;</span>用车</a></li>
                        <li><a href="javascript:;"><span class="iconfont">&#xe657;</span>签证</a></li>
                    </ul>
                </div>
                <div class="bott air-tkt">
                    <div class="way">
                        <a href="javascript:;" class="active">单程</a>
                        <a href="javascript:;">往返</a>
                        <a href="#">多程&gt;&gt;<span class="iconfont">&#xe6b4;</span></a>
                    </div>
                    <div class="city danc">
                        <form action="#" method="post">
                            <div class="change">
                                <a href="#">
                                    <span class="iconfont first">&#xe633;</span>
                                    <span class="iconfont second">&#xe714;</span>
                                    <span class="iconfont third">&#xe633;</span>
                                </a>
                            </div>
                            <div class="import">
                                <label>出发城市</label>
                                <input type="text" class="put cityChoiceFrom" id="deptcity"
                                       placeholder="全拼/简拼/汉字"/><span class="iconfont"><a href="#">&#xe8ad;</a></span>
                                <input type="hidden" id="province1" value="">
                                <input type="hidden" id="city1" value="">
                            </div>
                            <div class="import">
                                <label>到达城市</label>
                                <input type="text" class="put cityChoiceTo" id="arrcity" placeholder="全拼/简拼/汉字"/><span
                                    class="iconfont"><a href="#">&#xe8ae;</a></span>
                                <input type="hidden" id="province2" value="">
                                <input type="hidden" id="city2" value="">
                            </div>
                            <div class="import">
                                <label>出发日期</label>
                                <input type="text" class="put test-item" id="flightdate" placeholder="yyyy-MM-dd"/><span
                                    class="iconfont"><i>星期六</i><a href="#">&#xe610;</a></span>
                            </div>
                            <div class="choose">
                                <p>
                                    <span>成人(&ge;12岁)</span>
                                    <span>儿童(2-11岁)</span>
                                    <span>婴儿(&lt;2岁)</span>
                                </p>
                                <select>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                </select>
                                <select>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                                <select>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                </select>
                            </div>
                            <div class="history">
                                <a href="#">历史记录查询<i></i></a>
                                <a href="#"><span class="iconfont">&#xe602;</span>价格保障 买贵全赔</a>
                            </div>
                            <div class="btn">
                                <input type="submit" value="立即查询" onclick="findflight();"/>
                            </div>
                        </form>
                    </div>
                    <div class="clear"></div>
                    <div class="city wangf">
                        <form action="#" method="post">
                            <div class="change">
                                <a href="#">
                                    <span class="iconfont first">&#xe633;</span>
                                    <span class="iconfont second">&#xe714;</span>
                                    <span class="iconfont third">&#xe633;</span>
                                </a>
                            </div>
                            <div class="import">
                                <label>出发城市</label>
                                <input type="text" class="put cityChoiceFrom" id="2" placeholder="全拼/简拼/汉字"/><span
                                    class="iconfont"><a href="#">&#xe8ad;</a></span>
                                <input type="hidden" id="province3" value="">
                                <input type="hidden" id="city3" value="">
                            </div>
                            <div class="import">
                                <label>到达城市</label>
                                <input type="text" class="put cityChoiceTo" id="3" placeholder="全拼/简拼/汉字"/><span
                                    class="iconfont"><a href="#">&#xe8ae;</a></span>
                                <input type="hidden" id="province4" value="">
                                <input type="hidden" id="city4" value="">
                            </div>
                            <div class="import">
                                <label>出发日期</label>
                                <input type="text" class="put test-item" placeholder="yyyy-MM-dd"/><span
                                    class="iconfont"><i>星期六</i><a href="#">&#xe610;</a></span>
                            </div>
                            <div class="import">
                                <label>回程日期</label>
                                <input type="text" class="put test-item" placeholder="yyyy-MM-dd"/><span
                                    class="iconfont"><i>星期六</i><a href="#">&#xe610;</a></span>
                            </div>
                            <div class="choose">
                                <p>
                                    <span>成人(&ge;12岁)</span>
                                    <span>儿童(2-11岁)</span>
                                    <span>婴儿(&lt;2岁)</span>
                                </p>
                                <select>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                </select>
                                <select>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                                <select>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                </select>
                            </div>
                            <div class="history">
                                <a href="#">历史记录查询<i></i></a>
                                <a href="#"><span class="iconfont">&#xe602;</span>价格保障 买贵全赔</a>
                            </div>
                            <div class="btn">
                                <input type="submit" value="立即查询" onclick="selectflight()"/>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="bott hotel">
                    酒店
                </div>
                <div class="bott car">
                    用车
                </div>
                <div class="bott visa">
                    签证
                </div>
            </div>
            <div class="clear"></div>
            <div class="right fw">
                服务
            </div>
            <div class="right ly">
                旅游
            </div>
            <div class="right xx">
                信息
            </div>
            <div class="right ydd">
                移动端
            </div>
            <div class="right td">
                团队
            </div>
        </div>
    </div>
    <div class="con">
        <div class="flight">
            <div class="ticket">
                <a href="javascript:;" class="active">国内优惠机票预订</a>
                <a href="javascript:;" class="">国际优惠机票预订</a>
                <a href="#" class="">免票兑换</a>
            </div>
            <div class="clear"></div>
            <div class="show">
                <div class="show-ticket inland">
                    <div class="ticket-head">
                        <ul>
                            <li class="active"><a href="javascript:;">哈尔滨</a></li>
                            <li><a href="javascript:;">天津</a></li>
                            <li><a href="javascript:;">武汉</a></li>
                            <li><a href="javascript:;">广州</a></li>
                            <li><a href="#">更多</a></li>
                        </ul>
                    </div>
                    <div class="ticket-body heb">
                        <ul>
                            <li><a href="#">哈尔滨&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;漠河<span>&yen;410起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;烟台<span>&yen;560起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;济南<span>&yen;560起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;青岛<span>&yen;580起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;石家庄<span>&yen;600起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;郑州<span>&yen;660起</span></a></li>
                            <li><a href="#">哈尔滨&rarr;南京<span>&yen;700起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="ticket-body tj">
                        <ul>
                            <li><a href="#">天津&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">天津&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">天津&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">天津&rarr;漠河<span>&yen;410起</span></a></li>
                            <li><a href="#">天津&rarr;烟台<span>&yen;560起</span></a></li>
                            <li><a href="#">天津&rarr;济南<span>&yen;560起</span></a></li>
                            <li><a href="#">天津&rarr;青岛<span>&yen;580起</span></a></li>
                            <li><a href="#">天津&rarr;石家庄<span>&yen;600起</span></a></li>
                            <li><a href="#">天津&rarr;郑州<span>&yen;660起</span></a></li>
                            <li><a href="#">天津&rarr;南京<span>&yen;700起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="ticket-body wh">
                        <ul>
                            <li><a href="#">武汉&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">武汉&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">武汉&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">武汉&rarr;漠河<span>&yen;410起</span></a></li>
                            <li><a href="#">武汉&rarr;烟台<span>&yen;560起</span></a></li>
                            <li><a href="#">武汉&rarr;济南<span>&yen;560起</span></a></li>
                            <li><a href="#">武汉&rarr;青岛<span>&yen;580起</span></a></li>
                            <li><a href="#">武汉&rarr;石家庄<span>&yen;600起</span></a></li>
                            <li><a href="#">武汉&rarr;郑州<span>&yen;660起</span></a></li>
                            <li><a href="#">武汉&rarr;南京<span>&yen;700起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="ticket-body gz">
                        <ul>
                            <li><a href="#">广州&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">广州&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">广州&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">广州&rarr;漠河<span>&yen;410起</span></a></li>
                            <li><a href="#">广州&rarr;烟台<span>&yen;560起</span></a></li>
                            <li><a href="#">广州&rarr;济南<span>&yen;560起</span></a></li>
                            <li><a href="#">广州&rarr;青岛<span>&yen;580起</span></a></li>
                            <li><a href="#">广州&rarr;石家庄<span>&yen;600起</span></a></li>
                            <li><a href="#">广州&rarr;郑州<span>&yen;660起</span></a></li>
                            <li><a href="#">广州&rarr;南京<span>&yen;700起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="show-ticket international">
                    <div class="ticket-head">
                        <ul>
                            <li class="active"><a href="javascript:;">深圳</a></li>
                            <li><a href="javascript:;">北京</a></li>
                            <li><a href="javascript:;">青岛</a></li>
                            <li><a href="javascript:;">武汉</a></li>
                            <li><a href="#">更多</a></li>
                        </ul>
                    </div>
                    <div class="ticket-body heb">
                        <ul>
                            <li><a href="#">深圳&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">深圳&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">深圳&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">深圳&rarr;漠河<span>&yen;410起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="ticket-body tj">
                        <ul>
                            <li><a href="#">北京&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">北京&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">北京&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">北京&rarr;漠河<span>&yen;410起</span></a></li>
                            <li><a href="#">北京&rarr;烟台<span>&yen;560起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="ticket-body wh">
                        <ul>
                            <li><a href="#">青岛&rarr;伊春<span>&yen;210起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="ticket-body gz">
                        <ul>
                            <li><a href="#">武汉&rarr;伊春<span>&yen;210起</span></a></li>
                            <li><a href="#">武汉&rarr;北京<span>&yen;380起</span></a></li>
                            <li><a href="#">武汉&rarr;黑河<span>&yen;410起</span></a></li>
                            <li><a href="#">武汉&rarr;漠河<span>&yen;410起</span></a></li>
                            <li><a href="#">武汉&rarr;烟台<span>&yen;560起</span></a></li>
                            <li><a href="#">武汉&rarr;济南<span>&yen;560起</span></a></li>
                            <li><a href="#">武汉&rarr;青岛<span>&yen;580起</span></a></li>
                            <li><a href="#">武汉&rarr;石家庄<span>&yen;600起</span></a></li>
                            <li><a href="#">武汉&rarr;郑州<span>&yen;660起</span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="pic-show" id="shows">
                    <a class="sho" href="javascript:;"><img src="img/show1.jpg"/></a>
                    <a class="sho" href="javascript:;"><img src="img/show2.jpg"/></a>
                    <a class="sho" href="javascript:;"><img src="img/show3.png"/></a>
                    <a class="sho" href="javascript:;"><img src="img/show4.jpg"/></a>
                    <a class="sho" href="javascript:;"><img src="img/show5.jpg"/></a>
                    <a class="sho" href="javascript:;"><img src="img/show6.jpg"/></a>
                    <div class="point">
                        <ul id="tbs">
                            <li class="tb"><a href="javascript:;"></a></li>
                            <li class="tb"><a href="javascript:;"></a></li>
                            <li class="tb"><a href="javascript:;"></a></li>
                            <li class="tb"><a href="javascript:;"></a></li>
                            <li class="tb"><a href="javascript:;"></a></li>
                            <li class="tb"><a href="javascript:;"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="pic">
            <div class="pic-1">
                <a href="#"><img src="img/pic1.png"/></a>
                <h2><a href="#">价格保障</a></h2>
                <p><a href="#">会员专属 买贵全陪</a></p>
                <i><span class="iconfont">&#xe8f0;</span><a href="#">立即申诉</a></i>
            </div>
            <div class="pic-2">
                <a href="#"><img src="img/pic2.jpg"/></a>
                <h2><a href="#">旅游度假</a></h2>
                <p><a href="#">品质旅游 精选度假</a></p>
                <i><span class="iconfont">&#xe8f0;</span><a href="#">查看更多</a></i>
            </div>
            <div class="pic-3">
                <a href="#"><img src="img/pic3.jpg"/></a>
                <h2><a href="#">出境特惠</a></h2>
                <p><a href="#">轻松出行 玩遍全球</a></p>
                <i><span class="iconfont">&#xe8f0;</span><a href="#">查看更多</a></i>
            </div>
        </div>
        <div class="activity">
            <div class="activity-title">
                <i>官网活动</i>
                <a href="#"><span class="iconfont">&#xe8ef;</span></a>
                <a href="#"><span class="iconfont">&#xe8f0;</span></a>
            </div>
            <div class="activity-pic">
                <div class="act1">
                    <a href="#"><img src="img/act1.jpg"/></a>
                    <a href="#"><img src="img/act2.jpg"/></a>
                </div>
                <div class="act1">
                    <a href="#"><img src="img/act3.jpg"/></a>
                    <a href="#"><img src="img/act4.jpg"/></a>
                </div>
            </div>
            <div class="clear"></div>
            <div class="activity-turn">
                <a href="#" class="trn bg"></a>
                <a href="#" class="trn"></a>
            </div>
        </div>
        <div class="news">
            <div class="news-title">新闻</div>
            <div class="news-con">
                <h3><a href="#">南航在广州"邮寄"儿童单日超350名</a></h3>
                <p><a href="#">6月15日，2017年南航机务维修岗位技能竞赛决赛在广州落下帷幕。经过四天半紧张激烈的角逐，赛事圆满收官。</a></p>
            </div>
            <div class="news-more">
                <a href="#"><span class="iconfont">&#xe8f0;</span>查看更多</a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="banner-box2">
        <div class="banner2">
            <img src="img/banner7.jpg"/>
        </div>
    </div>
    <div class="con">
        <div class="list">
            <ul>
                <li><h4>关于南航</h4></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">招聘信息</a></li>
                <li><a href="#">新闻资讯</a></li>
                <li><a href="#">网站导览</a></li>
            </ul>
        </div>
        <div class="list">
            <ul>
                <li><h4>客户服务</h4></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">QQ客服</a></li>
                <li><a href="#">用户反馈</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">行李服务</a></li>
                <li><a href="#">机场服务</a></li>
                <li><a href="#">中转服务</a></li>
            </ul>
        </div>
        <div class="list">
            <ul>
                <li><h4>旅游服务</h4></li>
                <li><a href="#">签证办理</a></li>
                <li><a href="#">国内目的地</a></li>
                <li><a href="#">亚洲目的地</a></li>
                <li><a href="#">欧洲目的地</a></li>
                <li><a href="#">美洲目的地</a></li>
                <li><a href="#">大洋洲目的地</a></li>
                <li><a href="#">更多目的地</a></li>
            </ul>
        </div>
        <div class="list">
            <ul>
                <li><h4>更多信息</h4></li>
                <li><a href="#">南航集团</a></li>
                <li><a href="#">天合联盟</a></li>
                <li><a href="#">招标采购</a></li>
                <li><a href="#">南航跨境购</a></li>
                <li><a href="#">国内运输总条件</a></li>
                <li><a href="#">国际运输总条件</a></li>
                <li><a href="#">机上延误应急预案</a></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="attention">
            <p>关注与订阅</p>
            <a href="#"><span class="iconfont">&#xe712;</span></a>
            <a href="#"><span class="iconfont">&#xe673;</span></a>
            <a href="#"><span class="iconfont">&#xe627;</span></a>
        </div>
    </div>
    <div class="footer">
        <div class="con">
            <div class="copyright">
                <span>Copyright(C)1997-2017 中国南方航空股份有限公司版权所有 </span><a href="#">粤ICP备05053330号</a>
            </div>
            <ul>
                <li><a href="#">关于南航</a></li>
                <li><a href="#">投资者关系</a></li>
                <li><a href="#">预订须知</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>